<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/bookstore/" th:href="@{/}">
    <meta charset="UTF-8"/>
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css"/>
    <link rel="stylesheet" href="static/css/register.css"/>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
    <script src="static/script/vue.js"></script>
</head>
<body>
<div id="app">
    <div id="login_header">
        <a href="index.html">
            <img class="logo_img" alt="" src="static/img/logo.gif"/>
        </a>
    </div>

    <div class="login_banner">
        <div class="register_form">
            <h1>注册尚硅谷会员</h1>
            <div th:text="${error}" style="color:red;;"></div>
            <form action="user?method=doRegister" method="post">
                <div class="form-item">
                    <div>
                        <label>用户名称:</label>
                        <input type="text" name="username"  placeholder="请输入用户名" v-model="username" @blur="checkUsername"/>
                    </div>
                    <span style="color: red">{{usernameErrorMsg}}</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>用户密码:</label>
                        <input type="password"  name="password" placeholder="请输入密码" v-model="password"/>
                    </div>
                    <span style="color: red">{{passwordErrorMessage}}</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>确认密码:</label>
                        <input type="password" placeholder="请输入确认密码" v-model="passwordConfirm" />
                    </div>
                    <span style="color:#07c160;">{{confirmErrorMessage}}</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>用户邮箱:</label>
                        <input type="text" name="email" placeholder="请输入邮箱" v-model="email" />
                    </div>
                    <span>{{emailErrorMessage}}</span>
                </div>
                <button class="btn" @click="registerCheck">注册</button>
            </form>
        </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",//用户名
                password: "",//密码
                passwordConfirm: "",//确认密码
                email: "",//邮箱
                code: "",//验证码
                usernameErrorMsg: "",
                passwordErrorMessage: "",
                confirmErrorMessage: "",
                emailErrorMessage: ""

            }
        },
        // watch: {
        //     username(inputValue) {
        //         var usernameRegExp = /^[A-Za-z0-9_]{5,8}$/;
        //         if (!usernameRegExp.test(inputValue)) {
        //             this.usernameErrorMsg = "用户名应为5~8位数组和字母组成"
        //         }else{
        //             this.usernameErrorMsg=""
        //         }
        //     }
        // }
        methods: {
            checkUsername() {
                var usernameRegExp = /^[A-Za-z0-9_]{5,8}$/
                if (!usernameRegExp.test(this.username)) {
                    this.usernameErrorMsg = "用户名应为5~8位数组和字母组成"
                } else {
                    this.usernameErrorMsg = ""
                }
            },
            registerCheck() {
                //1.检验用户名
                var usernameRegExp = /^[A-Za-z0-9_]{5,8}$/
                if (!usernameRegExp.test(this.username)) {
                    event.preventDefault()
                    this.usernameErrorMsg = "用户名应为5~8位数组和字母组成"
                    return;
                } else {
                    this.usernameErrorMsg = ""
                }
                //2.校验密码
                var passwordRegExp = /^[A-Za-z0-9_]{6,10}$/;
                //2.2 使用正则表达式校验密码
                if (!passwordRegExp.test(this.password)) {
                    //密码不符合规则，那么就阻止默认事件
                    event.preventDefault()
                    this.passwordErrorMessage = "密码必须是6-10位的数字、字母或者下划线"
                    return
                } else {
                    this.passwordErrorMessage = ""
                }

                //3.校验重复密码
                if (this.password != this.passwordConfirm) {
                    event.preventDefault()
                    this.confirmErrorMessage = "两次输入的密码必须一致"
                    return
                } else {
                    this.confirmErrorMessage = ""
                }

                //4.校验邮箱
                var emailRegExp = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
                if (!emailRegExp.test(this.email)) {
                    event.preventDefault()

                    this.emailErrorMessage = "邮箱格式不正确"
                    return
                } else {
                    this.emailErrorMessage = ""
                }
            }

        }
    })
</script>
</body>
</html>
